$postMessage: () !default;

$postMessage: map-merge(
    (
        categoriesBackground: #ff6b6b,
        tagsBackground: #22a6b3 #0097e6 #fbc531 #10ac84,
        tagsColor: #333,
    ),
    $postMessage
);

$postMessageTagBackground: map-get($postMessage, tagsBackground);
$categoriesBackground: map-get($postMessage, categoriesBackground);
$tagsColor: map-get($postMessage, tagsColor);

.post-message {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-bottom: 20px;
    width: 100%;
}

.message-top {
    display: flex;
    flex-wrap: wrap;
    .message-categories,
    .message-tags {
        display: flex;
        align-items: center;
        margin: 8px 0;
        a {
            padding: 4px 8px;
            font-size: 13px;
            line-height: 14px;
            border-radius: 4px;
            margin: 0 0 0 8px;
        }
    }
    .message-categories {
        margin: 0 16px 0 0;
        a {
            color: #fff;
            background-color: $categoriesBackground;
            border: 1px solid $categoriesBackground;
        }
    }
    .message-tags {
        a {
            border: 1px solid;
            color: $tagsColor;
        }
    }
}

@for $i from 1 through length($postMessageTagBackground) {
    .message-tags a:nth-child(#{$i}) {
        border-color: nth($postMessageTagBackground, $i);
    }
}

.message-bottom {
    display: flex;
    gap: 8px;
    color: #999;
    white-space: nowrap;
    overflow: auto;
    font-size: 13px;
}

#EntryTag,
#BlogPostCategory {
    display: none;
}
